<template>
	<view :style="{ '--top-bar-height': mp.topBarHeight + 'px' }">
		<view v-if="needChangeVideo" class="mask" @tap.stop.prevent="maskHandler"></view>
		<view class="animation-dialog" :class="{ 'animation-dialog-show': needChangeVideo }">
			<view class="navbar-container">
				<view style="display: flex">
					<view class="skit-cover">
						<image :src="currentAblum.coverPictureUrl" mode="aspectFill" />
					</view>
					<view class="skit-detail">
						<view class="skit-title">{{ currentAblum.skitName }}</view>
						<view class="skit-desc">{{ currentAblum.episodeTotal }}集全</view>
						<view class="skit-desc-more">
							<!-- <view class="description" @tap.stop.prevent="gerMore">简介：{{ currentAblum.skitDesc }}
								<view class="more" v-if="currentAblum.skitDesc.length > 18" @tap.stop.prevent="gerMore">更多</view>
							</view> -->
							<kevy-ellipsis textId="q1" :content="'简介：'+ currentAblum.skitDesc" font-color="rgba(255, 255, 255, 0.6)" :font-size="26" :rows="2"
								@moreClick="gerMore" collapseText="收起" expandText="更多" actionFontColor="rgba(255, 255, 255, 0.6)"></kevy-ellipsis>
						</view>
					</view>
					<view class="back-icon iconfont-trade icon-close" style="z-index: 2001" @tap.stop.prevent="cancel">
						<view class="dy-iconfont icon-yuyinguanbi"></view>
					</view>
				</view>
			</view>
			<!-- 剧集区间选择区域 -->
			<view class="episode-interval">
				<episode-interval :options="sortList" :current="current" @change="handleTabbarChange" />
			</view>
			<view :current="current" style="height: 880rpx" @change="switchTap">
				<scroll-view id="card" scroll-y style="height: 880rpx" scroll-with-animation :scroll-into-view="scrollIntoViewId" @scroll="scroll">
					<view class="episode-card-con">
						<view class="episode-card" @tap.stop.prevent="onTapEpisodes" :data-episodeItem="it" v-for="(it, dex) in currentAblum.episodeList"
							:key="it.episodeId" :id="'scroll' + it.episodeId">
							<image class="img-cover" :src="currentAblum.coverPictureUrl" mode="aspectFill" />
							<view v-if="it.episodeId == currentVideoId" class="episode-card-mask">
								<view class="watching">正在观看</view>
							</view>
							<view v-if="!it.thirdVideoPath || it.chargeState == 1" class="episode-card-mask">
								<image class="lock-image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/lock2.png" mode="">
								</image>
							</view>
							<view class="episode-card-title" :class="{'episode-card-title-a': it.episodeId == currentVideoId}">
								{{ it.episodeName }}
							</view>
							<view v-if="!it.thirdVideoPath || it.chargeState == 1 || it.unlockState == 0" class="lock">付费</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<uv-popup ref="skitPop" mode="bottom" bgColor="none" overlayOpacity="0.6" zIndex="99999" :safeAreaInsetBottom="false">
			<view class="skit-desc-pop">
				<view class="desc-title-info">
					<view class="desc-title">剧情简介</view>
					<view class="back-icon iconfont-trade icon-close" style="z-index: 2001" @tap.stop.prevent="closePop">
						<view class="dy-iconfont icon-yuyinguanbi"></view>
					</view>
				</view>
				<view class="desc">{{ currentAblum.skitDesc }}</view>
			</view>
		</uv-popup>

	</view>
</template>

<script>
	import { rpxToPx } from '@/util/index';
	import episodeInterval from '@/components/tab-bar/index.vue';
	import goBack from '@/components/back/back.vue';
	import mp from '@/mixins/mp.js';
	var startPoint;
	const min = 0; // 最小宽度 单位px
	const app = getApp();
	export default {
		components: {
			episodeInterval,
			goBack
		},
		mixins: [mp],
		props: {
			needChangeVideo: {
				type: Boolean,
				default: false
			},
			isFullScreen: {
				type: Boolean,
				default: false
			},
			currentAblum: {
				type: Object
			},
			currentVideoId: {
				type: [Number, String]
			}
		},
		data() {
			return {
				sortList: [],
				swiperHeight: 0,
				animationData: null,
				skitTitle: '',
				ablumEpisodes: 0,
				dialogHeight: null,
				current: 0,
				scrollIntoViewId: '',
				descPop: false,
			};
		},
		computed: {},
		mounted() {
			this.$nextTick(() => {
				const dialogHeight = rpxToPx(1204);
				this.dialogHeight = dialogHeight;
				if (this.currentAblum.episodeList) {
					let sortList = Math.ceil(this.currentAblum.episodeList.length / 9);
					let start = 0;
					let end = 0;
					let episodes_list = [];
					for (let i = 1; i <= sortList; i++) {
						end = end + 9;
						start = end - 8;
						episodes_list = [];
						if (i == sortList) {
							end = this.currentAblum.episodeTotal;
						}
						var sort = start + '-' + end;
						this.currentAblum.episodeList.forEach((item, index) => {
							if (index + 1 <= end && index + 1 >= start) {
								episodes_list.push(item);
							}
						});
						let scrollHeight = 0;
						if (i == sortList - 1) {
							let yu = parseInt((this.currentAblum.episodeList.length % 9) / 3);
							scrollHeight = (i - 1) * 284 * 3 * this.mp.rpx + 284 * yu * this.mp.rpx;
						} else {
							scrollHeight = i * 284 * 3 * this.mp.rpx;
						}
						this.sortList.push({
							sort,
							episodes_list,
							scrollHeight: scrollHeight
						});
					}
					this.sortList.forEach((it, index) => {
						it.episodes_list.forEach((item) => {
							if (this.currentVideoId == item.episodeId) this.handleTabbarChange({
								current: index,
								list: it.episodes_list
							})
						});
					});
				}
			});
		},
		methods: {
			handleTabbarChange(event) {
				console.log(event);
				this.scrollIntoViewId = 'scroll' + event.list[0].episodeId;
				const current = event.current;
				this.current = current;
			},
			scroll(e) {
				let current = 0;
				var wz = '';
				if (e.detail.deltaY < 0) {
					wz = 'x'
				} else {
					wz = 's'
				}
				this.sortList.forEach((item, index) => {
					if (e.detail.scrollTop < this.sortList[0].scrollHeight && wz == 's') {
						this.current = 0;
						this.scrollIntoViewId = 'scroll' + this.currentAblum.episodeList[0].episodeId;
					} else if (e.detail.scrollTop > item.scrollHeight) {
						this.current = index + 1 > this.sortList.length - 1 ? this.sortList.length - 1 : index + 1;
					}
				});
			},
			switchTap(e) {
				const { current } = e.detail;
				this.current = current;
			},
			async requestData() {
				console.log('这里需要请求数据');
			},
			onTapEpisodes(e) {
				const { episodeitem } = e.currentTarget.dataset;
				this.$emit('episodesChangeHandler', {
					episodeitem
				});
			},
			maskHandler() {
				this.$emit('cancel');
				// this.descPop = false;
				this.closePop()
			},
			cancel() {
				this.$emit('cancel');
				// this.descPop = false;
				this.closePop()
			},
			gerMore() {
				this.descPop = true;
				this.$refs.skitPop.open();
			},
			closePop() {
				// this.descPop = false;
				this.$refs.skitPop.close();
			}
		}
	};
</script>

<style lang="scss">
	page {
		position: relative;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2000;
		background-color: rgba(0, 0, 0, 0);
	}

	.err-view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2001;
	}

	.bgShow {
		animation: fadeIn 0.2s;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 0.5;
		}
	}

	.bgLeave {
		animation: fadeOut 0.2s;
	}

	@keyframes fadeOut {
		from {
			opacity: 0.3;
		}

		to {
			opacity: 0;
		}
	}

	.animation-dialog {
		position: fixed;
		z-index: 2001;
		height: 1204rpx;
		bottom: -1204rpx;
		left: 0;
		width: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10px);
		transition: all 300ms ease-out 0ms;

		.back-icon {
			position: absolute;
			top: 45rpx;
			right: 45rpx;
		}
	}

	.animation-dialog-show {
		bottom: 0 !important;
	}

	.full-screen-dialog {
		position: fixed;
		z-index: 2001;
		width: 750rpx;
		height: 100vh;
		flex-shrink: 0;
		background: var(--bg-color-dark-const-bg-inverse-2, rgba(0, 0, 0, 0.6));
		bottom: 0;
		transform-origin: left top !important;
		right: 0;
	}

	.navbar-container {
		width: 750rpx;
		display: flex;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		justify-content: space-between;
		position: relative;
	}

	.skit-cover {
		margin-left: 32rpx;
		display: flex;
	}

	.skit-cover image {
		width: 128rpx;
		height: 154rpx;
		border-radius: 20rpx;
	}

	.skit-detail {
		width: calc(100vw - 32rpx - 32rpx - 16rpx - 128rpx);
		margin-left: 16rpx;
	}

	.skit-title {
		font-weight: 900;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 45rpx;
		font-family: PingFang SC;
		margin-bottom: 16rpx;
	}

	.skit-desc {
		font-weight: 600;
		font-size: 26rpx;
		color: #a3a4a5;
		line-height: 37rpx;
		margin-bottom: 16rpx;
	}

	.skit-desc-more {
		width: 100%;
		font-weight: 400;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.6);
		line-height: 37rpx;
		display: flex;
		align-items: center;
	}

	.skit-desc-more {
		.more {
			display: flex;
			align-items: center;

			&::after {
				font-family: 'dy-iconfont';
				content: '\e63f';
				font-size: 30rpx;
				margin-left: 8rpx;
				transform: rotate(180deg);
			}
		}
	}

	.description {
		// max-width: 83%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 定义文本的行数 */
		overflow: hidden;
		white-space: normal;
		position: relative;
	}

	// .description:after {
	// 	content: "...";
	// 	position: absolute;
	// 	right: 0;
	// 	bottom: 0;
	// }



	.dy-iconfont {
		font-size: 36rpx;
		color: #ffffff;
	}

	.episode-interval {
		z-index: 2001;
		width: 718rpx;
		margin-left: 32rpx;
		// height: 80rpx;
	}

	.episode-card {
		width: 212rpx;
		height: 260rpx;
		border-radius: 20rpx;
		border: 2rpx solid var(--line-line-primary, rgba(255, 255, 255, 0.08));
		overflow: hidden;
		position: relative;
	}

	.img-cover {
		width: 212rpx;
		height: 260rpx;
	}

	.episode-card-title {
		position: absolute;
		bottom: 0;
		left: 0;
		/* color: var(--text-text-primary, #FFF); */
		width: 100%;
		height: 52rpx;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
		text-align: center;
		text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, 0.15);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 52rpx;
	}

	.episode-card-title-a {
		background: none;
		backdrop-filter: blur(0);
		text-shadow: none;
	}

	.episode-card-mask {
		width: 212rpx;
		height: 260rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(4px);

		.lock-image {
			width: 73rpx;
			height: 73rpx;
		}
	}

	.lock {
		position: absolute;
		top: 0;
		right: 0;
		width: 76rpx;
		height: 37rpx;
		background: #e8ddc0;
		border-radius: 0rpx 20rpx 0rpx 20rpx;
		box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(142, 101, 14, 0.5);
		font-weight: 600;
		font-size: 24rpx;
		color: #b17f15;
		line-height: 37rpx;
		text-align: center;
	}

	.watching {
		color: var(--text-text-primary, #fff);
		text-align: center;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		position: absolute;
		// margin-top: -52rpx;
	}

	.episode-card-con {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 22rpx;
		width: 684rpx !important;
		padding: 24rpx 32rpx 32rpx;
	}

	.skit-desc-pop {
		width: calc(100vw + 2rpx + 2rpx);
		height: 60vh;
		// position: fixed;
		// bottom: -100vh;
		// left: 0;
		// z-index: 999999;
		transition: all 0.3s;
		box-sizing: border-box;
		padding: 43rpx 36rpx 0;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		backdrop-filter: blur(10px);
		// padding-top: calc(var(--top-bar-height) + 43rpx);
		margin-left: -2rpx;
		border: 2rpx solid #5D5E5E;
		background: rgba(27, 27, 27, 0.6);
		border-bottom: none;

		.desc-title-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.desc-title {
			font-weight: 900;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 45rpx;
		}

		.desc {
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			line-height: 37rpx;
		}
	}
</style>